<script lang="ts">
  import { createFFmpeg } from "@ffmpeg/ffmpeg";
  import LinearProgress from "@smui/linear-progress";
  import Tab, { Label } from "@smui/tab";
  import TabBar from "@smui/tab-bar";
  import ConvertImage from "./ConvertImage.svelte";

  let loaded = false;
  const ffmpeg = createFFmpeg({ 
    log: true,
    corePath: "/ffmpeg-core.js",
    workerPath: "/ffmpeg-core.worker.js",
    wasmPath: "/ffmpeg-core.wasm",
   });
  if (ffmpeg.isLoaded() == false) {
    ffmpeg.load().then(() => {
      loaded = true;
    });
  }

  let curTab = "image";
</script>

<main>
  {#if loaded}
    <TabBar tabs={["image", "audio", "video"]} let:tab bind:active={curTab}>
      <Tab {tab}>
        <Label>
          {#if tab == "image"}
            转换图片格式
          {:else if tab == "audio"}
            转换音频格式
          {:else if tab == "video"}
            转换视频格式
          {/if}
        </Label>
      </Tab>
    </TabBar>
    {#if curTab == "image"}
      <ConvertImage {ffmpeg} />
    {/if}
  {:else}
    <div>加载中...</div>
    <LinearProgress indeterminate />
  {/if}
</main>

<style>
  @import "../node_modules/svelte-material-ui/bare.css";
  main {
    margin: 20px 20px;
  }
  @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(./assets/icon.woff2) format('woff2');
}

:global(.material-icons) {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}
</style>
